<template>
  <div style="margin: auto"><h1>销售信息</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="customerBean.name"
        label="客户名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="user"
        label="销售员"
        width="150">
    </el-table-column>
    <el-table-column
        prop="date"
        label="销售时间"
        width="200">
    </el-table-column>
    <el-table-column
        prop="totalPrice"
        label="销售总额"
        width="150">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.findDiv=true">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <div class="searchDiv">
    <el-row>
      <el-col :span="10">客户名称<input type="text" v-model="findObj.name"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">起始时间<input type="date" v-model="findObj.startDate"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">结束时间<input type="date" v-model="findObj.endDate"></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="margin-top: 20px"><el-button type="primary" @click="findByItem(1)">搜索</el-button></el-col>
    </el-row>
  </div>

  <el-dialog
      v-model= "findDiv"
      title="采购信息详情"
      width="60%"
      center>
    <h3>采购信息详情</h3>
    <div style="margin-left: 100px;margin-top: 20px">客户名称:<span style="margin-left: 30px;margin-right: 50px">{{customer.name}}</span>
      销售员:<span style="margin-left: 30px">{{sale.user}}</span> </div>
    <div style="margin-left: 100px;margin-top: 20px">销售日期:<span style="margin-left: 50px;margin-right: 50px">{{sale.date}}</span>
      订单总额:<span style="margin-left: 50px">{{sale.totalPrice}}</span></div>
    <div style="margin-left: 100px;margin-top: 20px">送货地址:<span style="margin-left: 50px">{{sale.address}}</span></div>
    <div style="margin-top: 40px"><span>采购物品明细</span></div>
    <el-table
        :data="saleInfo"
        height="250"
        border
        style="width: 100%">
      <el-table-column
          prop="goodsBean.name"
          label="商品名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="goodsBean.brand"
          label="品牌"
          width="200">
      </el-table-column>
      <el-table-column
          prop="sellMoney"
          label="采购时间"
          width="130">
      </el-table-column>
      <el-table-column
          prop="num"
          label="采购数量"
          width="100">
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="this.findDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>

</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      cutObj:[],
      findObj:{},
      findDiv:false,
      sale:{},
      saleInfo:[],
      customer:{},
    }
  },
  methods:{
    findByItem(pageNo){
      this.findObj.pageNo = pageNo;
      axios.get("/project/sale/findByItem",{params:this.findObj}).then(resp=>{
        this.cutObj = resp.data;
      })
    },
    findById(id){
      axios.get("/project/sale/findById",{params:{id}}).then(resp=>{
        this.sale=resp.data;
        this.saleInfo=resp.data.saleInfoList;
        this.customer=resp.data.customerBean;
      })
    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.searchDiv{
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 700px;
  margin-top: 40px;
}

</style>